<template>
  <h3>{{ pList.title }}</h3>
  <div id="section">
    <bSearch :instance="mSearch">
      <el-button @click="() => mSearch.onSearch()" type="primary">搜索</el-button>
    </bSearch>
    <div class="blank"></div>
    <bTable :instance="pList"></bTable>
    <el-dialog v-model="dForm._show" :title="dForm.title" destroy-on-close>
      <bForm :instance="dForm" cover="50%">
        <el-button @click="onUpdate">完成</el-button>
      </bForm>
    </el-dialog>
    <bCropper v-model:img="tempImg"></bCropper>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { Userlist, UserForm, UserListSearch } from "@b/index/user";
import bTable from "@/components/public/b_table.vue";
import bSearch from "@/components/public/b_search.vue";
import bCropper from "@/components/User/b_cropper.vue";
import bForm from "@/components/public/b_form.vue";
import { ElDialog, ElButton } from "element-plus";
import { useRouter } from "vue-router";

const mSearch = new UserListSearch();
const pList = new Userlist();
const dForm = new UserForm();
const tempImg = ref("");
const router = useRouter();

mSearch.init();
dForm.showCroppe = (url: string) => {
  console.log(url);
  tempImg.value = url;
};
watch(tempImg, (url) => {
  console.log(url);
  dForm.data.headImg = url;
});
mSearch.onSearch = () => {
  //解构（浅拷贝，防止存在查询条件时点击页码产生的混乱）
  pList.search_key = mSearch.getData();
  pList.refresh(1);
};

pList.edit = async (id) => {
  if (!id) return;
  dForm._show = true;
  dForm.id = id;
  dForm.title = "修改用户信息";
  await dForm.setData();
};
pList.onRouterToInfo = (id) => {
  router.push("/sys/info?id=" + id);
};
pList.routertoC2C = (C2CId: number) => {
  router.push(`C2CList?id=${C2CId}`);
};
pList.add = async () => {
  dForm._show = true;
  dForm.title = "添加用户";
};
const onUpdate = async () => {
  const res = await dForm.updateData();
  if (res) {
    dForm._show = false;
    pList.refresh();
  }
};
</script>

<style scoped>
#section :deep(.el-dialog) {
  width: 90%;
  max-width: 780px;
  min-width: 252px;
}

#section .flex {
  display: flex;
  align-items: center;
}

.el-form {
  width: 80%;
}
</style>
